<template>
	<div>
		<div class="font-size18 font-bold margin-bottom20 color252630">标签管理</div>
		<el-form inline :model="query" label-width="80">
			<el-form-item label="模糊搜索">
				<el-input placeholder="请输入关键字" v-model="query.name" class="width260 margin-right30"></el-input>
			</el-form-item>
			<el-form-item label="分类">
				<el-select v-model="query.typeId" placeholder="请选择标签分类" class="width300" filterable clearable>
					<el-option v-for="item in tagTableAllData" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-button type="primary" icon="el-icon-search" class="margin-left10" @click="handleSearch">搜索</el-button>
			<el-button type="default" icon="el-icon-refresh-right" @click="handleRefresh">重置</el-button>
		</el-form>
		<div class="margin-top20">
			<el-button type="primary" @click="handleBatchDel">批量删除</el-button>
			<el-button type="primary" @click="handleAdd">新建标签</el-button>
		</div>
		<el-table :data="tableData" border class="margin-top20" header-cell-class-name="table-header-style"
			@selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center"></el-table-column>
			<el-table-column prop="id" label="标签ID" align="center"></el-table-column>
			<el-table-column prop="name" label="标签名称" align="center"></el-table-column>
			<el-table-column prop="questionCount" label="标签使用数量" align="center"></el-table-column>
			<el-table-column prop="tails.typename" label="标签分类" align="center"></el-table-column>
			<el-table-column prop="createTime" label="最后一次操作时间" align="center"></el-table-column>
			<el-table-column label="操作" align="center" width="160">
				<template slot-scope="scope">
					<el-button type="text" @click="handleAdd(scope.row)">编辑</el-button>
					<el-popconfirm title="确认删除？" @confirm="handleDel(scope.row.id)">
						<el-button slot="reference" type="text">删除</el-button>
					</el-popconfirm>
				</template>
			</el-table-column>
		</el-table>
		<div class="margin-top10">
			<el-pagination background layout="->,total,sizes, prev, pager, next" :current-page="query.pageNumber"
				:page-sizes="[30, 40, 50, 60]" @size-change="handleSizeChange" :page-size="query.pageSize" :total="pageTotal"
				@current-change="handlePageChange"></el-pagination>
		</div>
		<!-- 新增编辑标签 -->
		<el-dialog :title="title" :visible.sync="visible" width="30%">
			<el-form :model="form" label-width="80" :rules="rules" ref="form">
				<el-form-item label="标签名称" prop="name">
					<el-input v-model="form.name" placeholder="请输入标签名称" class="width300"></el-input>
				</el-form-item>
				<el-form-item label="标签分类" prop="typeId">
					<div class="row-me row-center">
						<el-select v-model="form.typeId" placeholder="请选择标签分类" class="width300" filterable>
							<el-option v-for="item in tagTableAllData" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
						<el-button type="text" class="margin-left10" @click="tagVisible=true">新建标签分类</el-button>
					</div>
				</el-form-item>
			</el-form>
			<span slot="footer">
				<el-button @click="visible = false">取 消</el-button>
				<el-button type="primary" @click="handleSave">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 新增编辑标签分类 -->
		<el-dialog title="标签分类" :visible.sync="tagVisible" width="40%">
			<el-table :data="tagTableData" border>
				<el-table-column label="分类名称" align="center">
					<template slot-scope="{row}">
						<el-input v-model="row.name" v-if="row.isEdit"></el-input>
						<span v-else>{{row.name}}</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="200">
					<template slot-scope="scope">
						<el-button type="text" v-if="scope.row.isEdit" @click="handleTagAdd(scope.row)">保存</el-button>
						<el-button type="text" @click="scope.row.isEdit=true" v-else>编辑</el-button>
						<el-popconfirm title="确认删除？" @confirm="handleTagDel(scope.row.id)">
							<el-button slot="reference" type="text">删除</el-button>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
			<div class="margin-top10">
				<el-pagination background layout="->,total,sizes, prev, pager, next" :current-page="tagQuery.pageNumber"
					:page-sizes="[10, 20, 30, 40]" @size-change="handleSizeTagChange" :page-size="tagQuery.pageSize"
					:total="pageTagTotal" @current-change="handlePageTagChange"></el-pagination>
			</div>
			<div class="margin-top20 row-me center-all">
				<el-input v-model="tagQuery.name" placeholder="请输入分类名称" class="margin-right20 width300"></el-input>
				<el-button type="primary" @click="handleTagAdd">新增</el-button>
			</div>
			<span slot="footer">
				<el-button type="primary" @click="tagVisible = false">关 闭</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				query: {
					pageNumber: 1,
					pageSize: 30
				},
				pageTotal: 0,
				tableData: [],
				multipleSelection: [],
				title: '',
				form: {},
				visible: false,
				tagVisible: false,
				tagTableData: [],
				tagTableAllData: [],
				tagQuery: {
					pageNumber: 1,
					pageSize: 10
				},
				pageTagTotal: 0,
				rules: {
					name: {
						required: true,
						message: '请输入标签名称',
						trigger: 'blur'
					},
					typeId: {
						required: true,
						message: '请选择标签分类',
						trigger: 'change'
					},
				}
			}
		},
		mounted() {
			this.getData()
			this.getTagData()
			this.getTagAllData()
		},
		methods: {
			//批量删除
			handleBatchDel() {
				this.$confirm('确定要批量删除已选中的题目吗？', '提示', {
					type: 'warning'
				}).then(() => {
					if (this.multipleSelection.length == 0) return
					let ids = Array.from(this.multipleSelection, ({
						id
					}) => id)
					this.$postForm('/admin/label/labelDelete', {
						ids
					}).then(res => {
						if (res.code == 1000) {
							this.$message.success('批量删除成功')
							this.getData()
							this.multipleSelection = []
						}
					})
				}).catch(() => {})
			},
			// 新增编辑标签分类
			handleTagAdd(row) {
				if (row.id) {
					this.$post('/admin/label/labelTypeUpdate', {
						id: row.id,
						name: row.name
					}).then(res => {
						if (res.code == 1000) {
							this.$message.success('编辑成功')
							this.getTagData()
							row.isEdit = false
						}
					})
				} else {
					this.$post('/admin/label/labelTypeSave', {
						name: this.tagQuery.name
					}).then(res => {
						if (res.code == 1000) {
							this.$message.success('新增成功')
							this.getTagData()
							this.tagQuery.name = ''
						}
					})
				}
			},
			handleSave() {
				this.$refs['form'].validate((valid) => {
					if (valid) {
						if (this.form.id) {
							this.$post('/admin/label/labelUpdate', this.form).then(res => {
								this.$message.success('编辑成功')
								this.getData()
							})
						} else {
							this.$post('/admin/label/labelSave', this.form).then(res => {
								this.$message.success('新增成功')
								this.getData()
							})
						}
						this.visible = false
					} else {
						return false;
					}
				});
			},
			// 新增编辑
			handleAdd(row) {
				if (row.id) {
					this.title = '编辑'
					this.form = JSON.parse(JSON.stringify(row))
				} else {
					this.title = '新增'
					this.form = {}
				}
				this.visible = true
			},
			//删除标签
			async handleDel(id) {
				let ids = [id]
				const res = await this.$postForm('/admin/label/labelDelete', {
					ids
				})
				if (res.code == 1000) {
					this.$message.success('删除成功')
					this.getData()
				}
			},
			//删除标签分类
			async handleTagDel(id) {
				const res = await this.$postForm('/admin/label/labelTypeDelete', {
					id
				})
				if (res.code == 1000) {
					this.$message.success('删除成功')
					this.getTagData()
				}
			},
			handlePageChange(val) {
				this.query.pageNumber = val
				this.getData();
			},
			handleSizeChange(val) {
				this.query.pageSize = val
				this.getData();
			},
			// 标签分类分页
			handlePageTagChange(val) {
				this.tagQuery.pageNumber = val
				this.getTagData();
			},
			handleSizeTagChange(val) {
				this.tagQuery.pageSize = val
				this.getTagData();
			},
			//多选操作
			handleSelectionChange(val) {
				this.multipleSelection = val
			},
			async getTagAllData() {
				const res = await this.$post('/admin/label/labelTypeAll?pageNumber=1&pageSize=99999')
				if (res.code == 1000) {
					this.tagTableAllData = res.data.list
				}
			},
			async getTagData() {
				const res = await this.$post(
					`/admin/label/labelTypeAll?pageNumber=${this.tagQuery.pageNumber}&pageSize=${this.tagQuery.pageSize}`, this
					.tagQuery)
				if (res.code == 1000) {
					this.tagTableData = res.data.list
					this.pageTagTotal = res.data.totalRow
					for (let item of this.tagTableData) {
						this.$set(item, 'isEdit', false)
					}
				}
			},
			async getData() {
				const res = await this.$postForm(
					`/admin/label/labelAll?pageNumber=${this.query.pageNumber}&pageSize=${this.query.pageSize}`, this.query)
				if (res.code == 1000) {
					this.tableData = res.data.list
					this.pageTotal = res.data.totalRow
				}
			},
			//搜索
			handleSearch() {
				this.query.pageNumber = 1
				this.getData();
			},
			//查询
			handleRefresh() {
				this.query = {
					pageNumber: 1,
					pageSize: 30
				}
				this.getData();
			}
		}
	}
</script>

<style>
</style>